<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .box_center1{
            width: 300px;
            height: 100px;
            margin: 20px auto;
            background-color: skyblue;
        }

        .box_center2_father{
            width: 100%;
            position: relative;
            height: 100px;
        }

        .box_center2{
            position: absolute;
            left: 50%;
            margin-left: -150px;
            width: 300px;
            height: 100px;
            background-color: yellowgreen;
        }

        .flash{
            width: 150px;
            height: 150px;
            background-color: aquamarine;
            animation: move 4s linear infinite;
        }
        @keyframes move{
            0%{
                transform:translateX(0);
            }

            25%{
                transform:translate(500px);
            }

            50%{
                transform:translate(500px,500px);
            }

            75%{
                transform:translate(0,500px);
            }

            100%{
                transform:translate(0);
            }
        }
    </style>
</head>
<body>
    <pre style="font-family:'微软雅黑';font-size:14px;">
        # 简答

        1. 描述一下相对定位与绝对定位的区别
            相对定位会占据原来的位置，绝对定位会将原来的位置空出来
            绝对定位不会占据原来的位置，会脱离标准文档流

        2. 描述一下你了解到的元素等级有哪些，具体介绍每一个元素等级的特点
            块级元素：独占一行，设置的宽高能正常加载出来
            行内元素：与其他行内元素并排一列，宽高不能正常加载，宽高被内容自动撑开
            行内块元素：与其他行内元素或行内块元素并排，宽高设置能正常加载


        3. 描述一下你所知道的清除浮动的方式（起码三种）
            clear：给父级元素添加clear属性
            内墙法：在最后一个浮动子元素后面添加clear属性
            伪类法：给父级元素添加一个class类名，
                    .clearfix:after{
                        content: '1'; //添加一个文字内容
                        display:block; //将文字转为块级元素
                        height:0; //将盒子高度固定为0，避免影响父盒子高度
                        clear:both; //清楚前面浮动影响
                        visibility:hidden; // 隐藏内容，但还在网页
                    }

        4. 描述一下你所知道的视频标签属性的属性名、属性值、以及作用（起码四种）
            属性        属性值       作用
            controls    controls    显示用户控件
            loop        loop        循环播放
            autoplay    autoplay    自动播放
            muted       muted       静音播放
            poster      ImgURL      加载等待时显示的图片          


        5. CSS3新增了伪元素选择器中双冒号与单冒号有什么区别，并阐述一下伪元素的注意事项
           区别：双冒号时H5的书写方式，单冒号是传统HTML书写方式
           注意事项：
                A. 冒号前面不能有空格
                B. 创建的元素是行内元素
                C. 只能给双标签添加，单标签不行
                D. 属性必须写有content:""        

        6. 标准盒模型与怪异盒模型的区别
            标准盒子模型是外扩，相当于盒子=宽+高
            怪异盒子模型是内扩，相当于盒子=宽+高+border+padding
    </pre>
    <div># 代码</div>

    <div>1. 实现一个盒子水平居中（起码两种方式）</div>
    <div class="box_center1">盒子水平居中方式一</div>
    <div class="box_center2_father">
        <div class="box_center2">盒子水平居中方式二</div>
    </div>

    <div>2. 使用@keyframes和animation实现一个元素先水平向右移动500px，然后向下移动500px，然后向左移动500px，
        最后向上500px回到原位，5S完成动画并一直重复</div>  
    <div class="flash"></div>
</body>
</html>